<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>ECharts 双折线图</title>
        <style>
            html,
            body {
                margin: 0;
                padding: 0;
                background-color: #000;
                height: 100%;
            }
            #main {
                width: 100%;
                height: 100vh;
            }
        </style>
    </head>
    <body>
        <div id="main"></div>

        <!-- 引入 ECharts -->
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
        <script>
            const chartDom = document.getElementById("main");
            const myChart = echarts.init(chartDom);
            const option = {
                backgroundColor: "#000", // 深色背景
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: ["红线", "黄线"],
                    textStyle: {
                        color: "#fff",
                    },
                },
                grid: {
                    left: "10%",
                    right: "10%",
                    bottom: "10%",
                    top: "15%",
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: ["01", "02", "03", "04", "05", "06", "07"],
                    axisLine: {
                        lineStyle: {
                            color: "transparent",
                        },
                    },
                    axisLabel: {
                        color: "#ccc",
                    },
                },
                yAxis: {
                    type: "value",
                    min: 0,
                    max: 15,
                    interval: 3,
                    axisLine: {
                        lineStyle: {
                            color: "#888",
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#222",
                        },
                    },
                    axisLabel: {
                        color: "#ccc",
                    },
                    name: "unit",
                    nameTextStyle: {
                        color: "#fff",
                        align: "right",
                        padding: [0, 10, 0, 0],
                    },
                },
                series: [
                    {
                        name: "红线",
                        type: "line",
                        data: [13, 8, 8, 7, 1, 6, 6],
                        // symbol: "circle",
                        // symbol: "path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z",
                        symbol: "path://M960 64v896H64V64h896z m-64 64H128v768h768V128zM512 192a320 320 0 1 1 0 640A320 320 0 0 1 512 192z",
                        // symbol: "image://",
                        symbolSize: [15, 15],
                        lineStyle: {
                            color: "#ff2d55",
                            width: 3,
                        },
                        itemStyle: {
                            color: "#ff2d55",
                        },
                    },
                    {
                        name: "黄线",
                        type: "line",
                        data: [9, 5, 9, 6, 5, 4, 4],
                        // symbol: "rect",
                        symbol: "path://M960 64v896H64V64h896z m-64 64H128v768h768V128zM512 192a320 320 0 1 1 0 640A320 320 0 0 1 512 192z",
                        symbolSize: [15, 15],
                        lineStyle: {
                            color: "#ffc300",
                            width: 3,
                        },
                        itemStyle: {
                            color: "#ffc300",
                        },
                    },
                ],
            };
            myChart.setOption(option);
        </script>
    </body>
</html>
